<template>
  <div class="bg">
    <van-steps direction="vertical" :active="6" :active-color="activeColor">
      <van-step>
        <h3>点击下面按钮复制店铺后台网址链接</h3>
        <div class="slot-icon" slot="finish-icon">1</div>
      </van-step>
      <van-step>
        <h3>打开电脑登录微信</h3>
        <div class="slot-icon" slot="finish-icon">2</div>
      </van-step>
      <van-step>
        <h3>把复制内容用手机发送给好友，然后在电脑微信上点击链接</h3>
        <div class="slot-icon" slot="finish-icon">3</div>
      </van-step>
      <van-step>
        <h3>用手机号和原账号密码登录进入后台</h3>
        <div class="slot-icon" slot="finish-icon">4</div>
      </van-step>
      <van-step>
        <h3>进入后台后先把门店内容补充齐全，让门店能在小程序展示</h3>
        <div class="slot-icon" slot="finish-icon">5</div>
      </van-step>
      <van-step>
        <h3>最后就是上传商品，等用户下单购买</h3>
        <div class="slot-icon" slot="finish-icon">6</div>
      </van-step>
    </van-steps>

    <div class="footer">
      <div class="_button">
        <van-button
            :color="activeColor"
            size="large"
            style="border-radius: 40px;margin: 0 auto;height: 100%"
            @click="handleCopy"
        >复制pc后台链接</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  computed: {
    merchant() {
      return this.$route.query ? this.$route.query : {};
    }
  },
  data() {
    return {
      pubUrl: process.env.VUE_APP_PUB_MERC_PC,
      activeColor: "#ffb72f"
    };
  },
  methods: {
    handleCopy() {
      this.$copyText(this.pubUrl).then(res => {
        this.$toast({
          message: "复制成功",
          position: "bottom"
        });
      });
    }
  }
};
</script>

<style scoped lang="less">
.bg {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #ffb72f;
}
.slot-icon {
  width: 34px;
  height: 34px;
  line-height: 34px;
  background: #ffb72f;
  border-radius: 50%;
  color: white;
  text-align: center;
}
/deep/.van-step__title {
  margin-bottom: 48px;
}

.footer {
  position: fixed;
  width: 100vw;
  height: 80px;
  bottom: 20px;
  ._button {
    width: 690px;
    margin: 0 auto;
    height: 100%;
  }
}
</style>
